﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>02m: Sprite Example</title>
	<style type="text/css">
		body, html {
			width: 100%;
			height: 100%;
			margin: 0;
			background-color: #FFFFF0;
			overflow: hidden;
		}
	</style>
	<script src="../../../bootloader.js" type="text/javascript"></script>
	<script type="text/javascript">
		go = function() {
			c = new opus.Container({
				name: "top",
				parentNode: document.body,
				styles: {position: "absolute", border: 8, padding: 4, borderColor: "green"},
				controls: [
					{l:10, t:10, w:225, h:15, styles: {bgColor: "white"}, spriteList: "$library/opus/controls/test/images/aerieProgress_15_15_x", controls: [
						{w:"100%",h:"100%",styles:{padding:1},controls:[
							{name: "progress", h:"100%", w: "20%", styles: {bgColor: "#FF0000"}}
						]},
						{w: "100%", h:"100%", defaultControlType: "Sprite", styles: {opacity: 0.5}, controls: [
							{spriteRow: 0},
							{r:0, spriteRow: 2},
							{l:15, r:15, autoWidth: false, spriteRow: 1}
						]}
					]}
				]
			});
			// Fit our container to the screen
			resize();
			// Render everything
			c.render();
			// Animate progress bar for fun
			var w = 0;
			fn = function() {
				c.$.progress.setWidth(w + "%");
				if (w++ == 100) {
					clearInterval(job);
				}
			};
			var job = setInterval(fn, 50);
		}
		resize = function() {
			c.setBounds({w: document.body.offsetWidth, h: document.body.offsetHeight});
		}
	</script>
</head>
<body onload="go()" onresize="resize()">
</body>
</html>
